import React, { Component } from 'react'
import Bg from '@/assets/images/unit_report/bg.png'
import Report from '@/assets/images/unit_report/report.png'
import styled from 'styled-components'
import { Row, Col, Button, Modal } from 'antd'
import ReactToPrint from 'react-to-print'
import { connect } from 'dva'
import moment from 'moment';


const Container = styled.div`
   width: 100%;
   height: 140px;
   background: url(${Bg}) no-repeat center center;
   background-size: 100% 100%;
`

const Title = styled.h2`
  font-size: 32px;
  font-weight: normal;
  color: rgba(255,255,255,1);
  line-height: 37px;
  letter-spacing: 5px;
  @media screen and (max-width: 1440px) {
   font-size: 24px
	}
`

const Score = styled.div`
  width:100%;
  text-align: center;
  height: 75px;
  font-size: 58px;
  font-weight: 500;
  color: rgba(255,255,255,1);
  line-height: 75px;
  letter-spacing: 7px;
  @media screen and (max-width: 1440px) {
    font-size: 43px
	}
`

const ImgCol = styled(Col)`
  padding: 11px 0 0 80px;
  @media screen and (max-width: 1440px) {
    padding: 11px 0 0 22px;
	}
`

const RightSection = styled.div`
  width: '100%';
  display: flex;
  justify-content: flex-end;
  padding-right: 110px;
  @media screen and (max-width: 1440px){
    padding-right: 100px
  }
`

@connect(({ user, unit_report }) => ({
  companyName: user?.details?.companyName || '',
  score: unit_report?.alarmHandleRate?.score || 0
}))
class Header extends Component<{ companyName?: string, domRef?: any, score?: number }, any> {

  state = { visible: false };

  handleOk = () => {

  }

  handleCancel = () => {
    this.setState({ visible: false });
  }

  show = () => {
    this.setState({ visible: true });
  }

  render() {
    const currMonth = moment().month() < 10 ? `0${moment().month()}` : moment().month()
    const { companyName, score } = this.props
    return (
      <Container>
        <Row style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Col span={15}>
            <Row
              style={{
                // marginLeft: '21px'
              }}>
              <ImgCol span={4}>
                <img style={{ float: 'right', marginRight: '20px' }} src={Report} />
              </ImgCol>
              <Col span={20}>
                <Title>
                  {companyName}消防报告
                </Title>
                <div style={{
                  color: 'rgba(255,255,255,1)',
                  fontSize: 16,
                  letterSpacing: '1px'
                }}>
                  {moment().get('year')}年{currMonth}月1日——{currMonth}月{moment(moment().subtract(1, 'month'), 'YYYY-MM').daysInMonth()}日
                  <Button
                    onClick={this.show}
                    style={{
                      background: 'rgba(8,128,223,0.5)',
                      color: '#fff',
                      width: '70px',
                      height: '22px',
                      fontSize: '14px',
                      marginLeft: '30px',
                      lineHeight: '18px'
                    }}
                  >
                    统计注解
                  </Button>
                </div>
              </Col>
            </Row>
          </Col>
          {/* 分界 */}
          <Col span={9}>
            <RightSection>
              <div style={{ width: '122px', textAlign: 'center' }}>
                <Score>
                  {score}
                </Score>
                <div style={{
                  width: '100%',
                  textAlign: 'center',
                  fontSize: '18px',
                  color: 'rgba(255,255,255,1)',
                  letterSpacing: '2px'
                }}>
                  消防安全评分
              </div>
              </div>
              <div style={{
                paddingLeft: 30,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-end',
              }}>
                <ReactToPrint
                  trigger={
                    () => <Button
                      className="btn_print"
                      icon='export'
                      style={{
                        background: 'rgba(8,128,223,0.5)',
                        color: '#fff',
                      }}
                    >
                      导出PDF
                  </Button>
                  }
                  content={() => this.props.domRef}
                  copyStyles={true}
                  documentTitle={`${companyName}--${new Date().getMonth() === 0 ? 1 : new Date().getMonth()}月份消防报告`}
                />

              </div>
            </RightSection>

          </Col>
        </Row>
        <Modal
          title="数据统计注解"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}
          width={800}
        >
          <p>(1) 单位消防报告为上月的消防数据统计，报告生成时间为每月的2日06:00左右；</p>
          <p>(2) 月消防评分的计算方式：100*[火警处理率+故障处理率+反馈处理率+屏蔽处理率+监管处理率]/5。</p>
          <p>(3) 报警数为上月所发生的报警条数；</p>
          <p>(4) 报警处理时间延迟至当月的2日00:00。比如5月31日23:54发生一条报警，处理报警时间为6月2日0
          时前，该条<span style={{ marginLeft: 23 }}>报警计入5月报警已处理中，逾期或不处理算为未处理。</span>
          </p>
        </Modal>
      </Container>
    )
  }
}

export default Header
